// import React, { Component } from 'react'

// export default class Dome3 extends Component {
//   render() {
//     return (
//       <div>Dome3</div>
//     )
//   }
// }
import React, { useState, useEffect, useRef } from 'react'
// import ReactDOM from 'react-dom/client'
// const root = ReactDOM.createRoot(document.querySelector('#root'))
function Dome3() {
  // 第一个参数为数据 第二个参数为修改数据的函数
  const [count, setCount] = useState(0);
  const [name, setName] = useState('tom');
  const myRef = useRef()
  useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    console.log('@@');
    return () => {
      clearInterval(timer)
    }
  }, [])
  // 点击加1
  function handleAdd() {
    // setCount(count + 1) //第一种写法 直接把值写到括号中
    // 第二种写法:参数为一函数形参默认传递参数为count  // 简写:  setCount(count =>  count + 1 )
    setCount((count) => { return count + 1 })
  }
  // 改变名字
  function nameChange() {
    setName(name => 'Jack') //相当于类式组件中的setState
  }
  // 卸载组件
  function unmount() {
    // ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    // 在 React 18 中，unmountComponentAtNode 已被 root.unmount() 取代。具体请参阅 createRoot 以了解更多。
  }

  // 点击输入的回调
  function show() {
    console.log(myRef);
    alert(myRef.current.value)
  }
  return (
    <div>
      <h3>当前求和为:{count}</h3>
      <button onClick={handleAdd}>点击+1</button>
      <button onClick={unmount}>点击卸载组件</button>
      <hr />
      <h3>我的名字是:{name}</h3>
      <button onClick={nameChange}>点击改名</button>
      <hr />
      <input type="text" ref={myRef} />
      <button onClick={show} >点击展示</button>
    </div>
  )
}

export default Dome3